<template>
	<view class="user">
		<view class="card">
			<view class="item" v-for="(item, index) in userInfo.data" :key="index">
				<text>{{item.title ? item.title : '无'}}</text>
				<text>{{item.value ? item.value : '无'}}</text>
			</view>
		</view>
		<!-- <view class="padding-t40">
			<button class="layout" @click="switchAccount">切换账号</button>
		</view> -->
		<view class="padding-t40">
			<button class="layout" @click="layout">退出登录</button>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	
	export default {
		data() {
			return {
				
			};
		},
		computed:{
			...mapState('login', ['userInfo'])
		},
		onLoad() {
			this.getUserInfo()
		},
		methods:{
			// 切换账号
			switchAccount() {
				uni.navigateTo({
					url: '/pages/switch-account/switch-account'
				})
			},
			// 退出登录
			layout() {
				this.$store.dispatch('login/layout')
			},
			getUserInfo() {
				this.$store.dispatch('login/getUserInfo')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user{
		padding: 32rpx;
		box-sizing: border-box;
		
		.card{
			padding: 0 32rpx;
		}
		
		.item{
			display: flex;
			color: #333333;
			padding: 32rpx 0;
			font-size: 30rpx;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #efefef;
			
			&:last-child{
				border-bottom: none;
			}
		}
		
		.layout{
			height: 84rpx;
			font-size: 30rpx;
			line-height: 84rpx;
			border-radius: 100rpx;
			background-color: #FFFFFF;
			border: 1rpx solid #efefef;
			
			&::after{
				border: none;
			}
		}
	}
</style>
